<!DOCTYPE html>
<html >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<#include "/end/include/head.ftl"/>
<body style='overflow:scroll;overflow-x:hidden'>
<div class="main layui-clear">
    <form class="layui-form layui-form-pane" action="${basePath}/function/doEdit.do">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型</label>
            <div class="layui-input-block">
            <@dictSelect id="functionlevel" name="functionlevel" code="functionLevel" showSelect="false" value="${function.functionlevel!}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="functionname" required  lay-verify="required" value="${function.functionname!}" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <input type="text" name="permission" value="${function.permission!}" placeholder="请输入权限" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单地址</label>
            <div class="layui-input-block">
                <input type="text" name="functionurl" required  lay-verify="required" value="${function.functionurl!}" placeholder="请输入菜单地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-block">
                <input type="text" value="" id="parentFunctionId" readonly class="layui-input" onclick="showMenu();"/>
                <input type="hidden" value="${function.parentFunctionId!}" name="parentFunctionId" id="pId" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" id="icon" value="${function.icon!}" placeholder="请输入图标" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editSubmitBtn" style="display: none;" id="submitBtn">立即提交</button>
                <#--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
</div>
</body>
<script type="text/javascript" src="${basePath}/static/plugins/zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${basePath}/static/plugins/zTree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${basePath}/static/plugins/zTree/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
    var IDMark_A = "_a";

    function showMenu() {
        var cityObj = $("#parentFunctionId");
        var cityOffset = $("#parentFunctionId").offset();
        if($("#menuContent").is(':hidden')){
            $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        }else{
            $("#menuContent").fadeOut("fast");
        }
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "parentFunctionId" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    var setting = {
        check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        view: {
            //addHoverDom: addHoverDom,
            //removeHoverDom: removeHoverDom,
            dblClickExpand: false
        },

        data: {
            key: {
                name: "functionname"
            },
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentFunctionId",
                rootPId: null
            }
        },
        callback: {
            onClick: onClick,
            onCheck: onCheck
        }
    };
    function onClick(e, treeId, treeNode) {
        var tree = zTree.getZTreeObj("treeDemo");
        tree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function onCheck(e, treeId, treeNode) {
        var tree = zTree.getZTreeObj("treeDemo"),
                nodes = tree.getCheckedNodes(true),
                v = "",vid = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].functionname + ",";
            vid += nodes[i].id + ",";
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        if (vid.length > 0 ) vid = vid.substring(0, vid.length-1);
        $("#parentFunctionId").val(v);
        $("#pId").val(vid);
    }
    function addHoverDom(treeId, treeNode) {
        if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
        var aObj = $("#" + treeNode.tId + IDMark_A);
        if ($("#diyBtn_"+treeNode.id).length>0) return;
        var editStr = "<span id='diyBtn_" +treeNode.id+ "'>编码:"+treeNode.id+"</span>";
        aObj.after(editStr);
    }
    function removeHoverDom(treeId, treeNode) {
        $("#diyBtn_"+treeNode.id).unbind().remove();
        $("#diyBtn_space_" +treeNode.id).unbind().remove();
    }

    var zNodes;
    $(document).ready(function(){
        $.ajax({
            async : false,
            cache:false,
            type: 'POST',
            dataType : "json",
            url: '${basePath}/function/tree.do?level=2',//请求的action路径
            error: function () {//请求失败处理函数
                alert('请求失败');
            },
            success:function(data){ //请求成功后处理函数。
                zNodes = data;   //把后台封装好的简单Json格式赋给zNodes
                console.log(data);
                var id = $("#pId").val();
                $.each(data,function (i,n) {
                    if (n.id == id ) {
                        $("#parentFunctionId").val(n.functionname);
                    }
                })
            }
        });
        zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>